<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
          @search="$refs.table.refresh(true)"
          @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolForm">
          <a-form-item label="流程标题">
            <a-input
                v-model="queryParam.formName"
                placeholder="流程标题"
                style="width: 100%"
            />
          </a-form-item>
          <a-form-item label="所属流程">
            <a-input
                v-model="queryParam.modelName"
                placeholder="所属流程"
                style="width: 100%"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
          ref="table"
          :columns="columns"
          :url="url"
          rowKey="processInstanceId"
          showPagination="auto"
          :queryParam="queryParam"
          :showRowSelect="false"
      >
        		<span slot="renderFlowStatus" slot-scope="{ text, record, index }">
					<a-tag :color="'green'">
						审核完成
					</a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a @click="flowChart(record)">详情</a>
						<span class="action-margin"></span>
            <a @click="flowDelete(record)" class="action-delete">删除</a>
          </template>
        </span>
      </DataGrid>
      <flow-chat ref="flowChatForm"/>
      <task-form
          ref="taskModal"
          :visible="taskVisible"
          @cancel="taskHandleCancel()"
          @ok="taskHandleOk"
      />
    </div>
  </div>
</template>

<script>
import {dataGridMixin} from "@/mixins/dataGridMixin";
import {DataGrid} from "@/components";
import flowChat from "../myMission/flowChat.vue";
import taskForm from "./taskForm.vue";

export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    flowChat,
    taskForm,
  },
  data() {
    return {
      columns: [
        {
          title: "流程标题",
          dataIndex: "formName",
          width: 200,
          langCode: "workflowTitle"
        },
        {
          title: "所属流程",
          dataIndex: "modelName",
          width: 150,
          langCode: "workflowBelongingTo",
        },
        {
          title: "发起人",
          dataIndex: "startUserId",
          langCode: "sponsor",
          align: "center",
        },
        {
          title: "发起时间",
          dataIndex: "startTime",
          langCode: "originatingTime",
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
        },
        {
          title: "流程状态",
          dataIndex: "flowStatus",
          langCode: "ProcessStatus",
          align: "center",
          scopedSlots: {
            customRender: "renderFlowStatus"
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 140,
          scopedSlots: {
            customRender: "renderAction",
          },
          align: "center",
        },
      ],
      taskVisible: false,
      visible: false,
      confirmLoading: false,
      mdl: null,
      queryParam: {},
      url: {
        getPageSet: "/workflow/apiFlowableTask/getCompletedTaskPageSet",
      },
    };
  },
  methods: {
    flowChart(e) {
      const jsonData = "";
      this.$post("/workflow/apiFlowableTask/historyClickDetails", {
        processInstanceId: e.processInstanceId,
        modelKey: e.modelKey,
        processDefinitionId: e.processDefinitionId,
        businessKey: e.businessKey,
      }).then((res) => {
        if (res.statusCode == 300) {
          this.$message.error(res.message);
        } else {
          const jsonData = res;
          this.$refs.taskModal.loadData(e, jsonData);
          this.taskVisible = true;
        }
      });
    },
    taskHandleOk() {
      this.taskVisible = false;
    },
    taskHandleCancel() {
      this.taskVisible = false;
    },
    flowDelete(record) {
      const that = this;
      that.$confirm({
        title: "警告",
        content: `此操作将永久删除该数据，确定要执行该操作吗?`,
        okText: "确定",
        cancelText: "取消",
        closable: true,
        icon: () => that.$createElement('a-icon', {
          props: {
            key: 'warning',
            type: 'exclamation-circle',
            twoToneColor: '#faad14'
          }
        }),
        onOk() {
          return new Promise((resolve, reject) => {
            that
                .$post("/workflow/apiFlowableTask/deleteHistoricProcessInstance", {
                  instanceId: record.processInstanceId,
                })
                .then((res) => {
                  if (res.statusCode === 200) {
                    that.$message.success(res.message);
                    that.$refs.table.refresh();
                    resolve();
                  } else {
                    that.confirmLoading = false;
                    that.$message.error(res.message);
                    resolve();
                  }
                });
          })
        },
        onCancel() {
        },
      });
    },
  },
};
</script>

<style lang="less"></style>
